<template>
  <FormTableLayout>
    <template #form>Users</template>
    <template #tools>
      <el-button :icon="Plus" type="primary" size="small" plain @click="handleClickBtnAdd">新建</el-button>
    </template>
    <template #default>
      <el-table :data="tableData" style="width: 100%" border scrollbar-always-on header-cell-class-name="table-header-row" empty-text="没有数据">
        <el-table-column prop="id" label="id" width="80" />
        <el-table-column prop="username" label="username" width="180" />
        <el-table-column prop="nickname" label="nickname" width="180" />
        <el-table-column label="角色" width="180">
          <template #default="scope">
            <DictTextLabel :dict-value="scope.row.role_id" dict-code="ROLES" />
          </template>
        </el-table-column>
        <el-table-column />
        <el-table-column width="300">
          <template #default="scope">
            <el-button @click="handleClickBtnEditMenu(scope.row)" type="primary" :icon="Edit" size="small" link>编辑</el-button>
            <el-button @click="handleClickBtnResetPassword(scope.row)" type="primary" :icon="Edit" size="small" link>重置密码</el-button>
            <el-button @click="handleClickBtnDeleteMenu(scope.row.id)" type="danger" :icon="Delete" size="small" link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #other>
      <DrawersEdit ref="refDrawersEdit" @submit-successed="handleDrawersEditSubmit" />
    </template>
  </FormTableLayout>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import FormTableLayout from '@/layout/FormTableLayout.vue'
import DictTextLabel from '@/components/Common/DictTextLabel.vue'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import DrawersEdit from './drawers/Edit.vue'
import Dal from '@/dal'
import { ElMessage, ElMessageBox } from 'element-plus'

const refDrawersEdit = ref()
const tableData = ref([])

const handleClickBtnAdd = () => {
  if (refDrawersEdit.value) {
    refDrawersEdit.value.open()
  }
}
const handleClickBtnEditMenu = (val: any) => {
  if (refDrawersEdit.value) {
    refDrawersEdit.value.open(val)
  }
}
const handleClickBtnDeleteMenu = (val: any) => {
  ElMessageBox.confirm('确定删除？', '警告', {
    type: 'warning',
  })
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed' + val,
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled' + val,
      })
    })
}
const handleDrawersEditSubmit = async () => {
  await init()
}
const handleClickBtnResetPassword = async (val: any) => {
  const res = await Dal.Users.resetPassword({ id: val.id })
  console.log(res)
  // if (res.code === 200) {
  //   ElMessage.success('重置密码成功')
  // } else {
  //   ElMessage.error(res.message)
  // }
  ElMessage.success('重置密码成功')
}

const init = async () => {
  await getDataList()
}
const getDataList = async () => {
  const res = await Dal.Users.list()
  tableData.value = res.data
}
onMounted(async () => {
  await init()
})
</script>
